<template>
  <div class="sec-top">
    <form class="form-inline" @submit.prevent="search">
      <div class="form-group form-group-sm">
        <select class="form-control" v-model="searchType">
          <option value="1">手机号</option>
          <option value="2">用户ID</option>
        </select>
        <input type="text" class="form-control" placeholder="多个用户使用「 , 」分隔" v-model="searchTxt">
      </div>
      <input type="submit" class="btn btn-sm btn-primary" value="搜索邀请关系">
    </form>
  </div>
  <table class="table table-bordered table-hover" v-if="list.length">
    <caption>用户邀请关系列表</caption>
    <tr>
      <th class="col-xs-2">ID</th>
      <th class="col-xs-3">昵称</th>
      <th class="col-xs-3">手机号</th>
      <th class="col-xs-2">邀请注册数</th>
      <th class="col-xs-2">接受邀请数</th>
    </tr>
    <template v-for=" item in list ">
      <tr>
        <td class="col-sm-2" v-if=" item.list.length " :rowspan="item.list.length + 2">{{item.id}}</td>
        <td class="col-sm-2" v-else>{{item.id}}</td>
        <td class="col-sm-3">{{item.nickname}}</td>
        <td class="col-sm-3">{{item.phone}}</td>
        <td class="col-sm-2">{{item.num}}</td>
        <td class="col-sm-2">{{item.acceptnum}}</td>
      </tr>
      <template v-if=" item.list.length ">
        <tr class="info">
          <td class="col-sm-6" colspan="2">手机号</td>
          <td class="col-sm-4" colspan="2">状态</td>
        </tr>
        <tr v-for=" childItem in item.list">
          <td class="col-sm-6" colspan="2">{{childItem.phone}}</td>
          <td class="col-sm-4" colspan="2">{{childItem.status | invitationStatus}}</td>
        </tr>
      </template>
    </template>
  </table>
</template>
<style src="./invitation.css" scoped></style>
<script src="./invitation.js"></script>